/**
* 运维工具  监控脚本
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>linux 终端</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-select size="small" v-model="formInline.hostlist" placeholder="请选择主机">
          <el-option v-for="type in hostlist" :label="type.host_name_ip" :value="type.host_ip"
                     :key="type.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!--  终端界面  -->
    <div id="terminal"></div>

  </div>
</template>

<script>
import {devHostList,} from '../../api/devMG'



export default {
  data() {
    return {
      hostlist: [
        {host_ip: '请选择', id: 0},
        {host_ip: '已处理', id: 1},
        {host_ip: '未处理', id: 2},
      ],
      formInline: {
        hostlist: '',
        token: localStorage.getItem('logintoken')
      },
    }
  },
  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
    // this.show_terminale()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据方法
    getdata(parameter) {
      devHostList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.hostlist = res.data
          }
        })
    },
    // show_terminale(){
    //   let term = new Terminal({cursorBlink: true, useStyle: true, cols: 500, rows: 500});
    //   term.open(document.getElementById('terminal'));
    //   term.focus();
    //   let socket = new WebSocket('ws://' + window.location.host + '/ws/webssh/{{ host }}/{{ username }}/{{ password }}');
    //   socket.onopen = function () {
    //     term.onData(data => {
    //         let send_data = JSON.stringify({
    //             'flag': 'input',
    //             'data': data,
    //         });
    //         console.log(send_data)
    //         socket.send(send_data)
    //     })
    //   }
    //   socket.onerror = function (event) {
    //     console.log('error:' + event);
    //   };
    //   socket.onmessage = function (event) {
    //     data = JSON.parse(event.data);
    //     term.write(data.message);
    //
    //     if (data.flag === 'failed') {
    //         socket.close();
    //     }
    //   };
    //
    // socket.onclose = function (event) {
    //     term.write('\n\r\x1B[1;3;31m连接关闭.\x1B[0m');
    //   };
    // }
  },
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>

